<template>
  <div class="infinite-container bgwhite">
    <div class="pd20 flex">
      <ul class="steps">
        <li>
          <img src="../../assets/images/paySuccess1.png" alt />
          <i class="vLineGreen"></i>
        </li>
        <li>
          <img src="../../assets/images/paySuccess2gray.png" alt />
          <i class="vLineGray"></i>
        </li>
        <li>
          <img src="../../assets/images/paySuccess3gray.png" alt />
          <i class="vLineGray"></i>
        </li>
        <li>
          <img src="../../assets/images/paySuccess4gray.png" alt />
        </li>
      </ul>
      <ul class="stepText">
        <li>
          <b class="greenTitle">支付成功</b>
          <p>{{content[0]}}</p>
        </li>
        <li>
          <b class="grayTitle">已通知医生</b>
          <p class="grayContent">{{content[1]}}</p>
        </li>
        <li>
          <b class="grayTitle">医生下处方</b>
          <p class="grayContent">{{content[2]}}</p>
        </li>
        <li>
          <b class="grayTitle">在线购药或到院取药</b>
          <p class="grayContent">{{content[3]}}</p>
        </li>
      </ul>
    </div>
    <div class="saveBtn" style="margin-top:0;">
      <mu-raised-button label="马上在线沟通" @click="goIM()" fullWidth primary />
    </div>
  </div>
</template>

<script>
import { commonAjaxJson, RESTFUL_API } from "@/api/api";
export default {
  data() {
    return {
      hospitalCode: sessionStorage.getItem("hospitalCode") || "1",
      activeStep: 0,
      content: []
    };
  },
  computed: {
    currentData() {
      if (localStorage.getItem("medicalAgainPayData")) {
        return JSON.parse(localStorage.getItem("medicalAgainPayData"));
      } else {
        return "";
      }
    }
  },
  mounted() {
    this.getSysCopywriting();
  },
  methods: {
    goIM() {
      if (!this.currentData) {
        this.$store.commit("UPDATE_TOAST", {
          message: "页面缺少参数!"
        });
        return;
      }
      window.location.href =
        "app://medicalAgainIMFromPayOk?consultId=" +
        this.currentData.consultId +
        "&doctorName=" +
        this.currentData.doctName +
        "&doctorCode=" +
        this.currentData.doctCode +
        "&status=" +
        "21" +
        "&doctorId=" +
        this.currentData.doctId;
    },
    getSysCopywriting(code = "OR_payment_success") {
      let param = {
        hospitalCode: this.hospitalCode,
        code
      };
      commonAjaxJson(RESTFUL_API.getSysCopywriting, param, true).then(res => {
        if (res.data.code === 200) {
          if (res.data.data && res.data.data.content) {
            let content = res.data.data.content;
            var pattern = /<\/?[a-zA-Z]+(\s+[a-zA-Z]+=".*")*>/g;
            content = content.replace(pattern, "").split("@");
            this.content = content;
          }
        }
      });
    }
  }
};
</script>

<style scoped lang="less">
@import "../../common/css/vars";
@import "../../common/css/flex.css";
.steps {
  li {
    width: 100px;
    text-align: center;
    .vLineGreen,
    .vLineGray {
      height: 66px;
      background-color: @color-primary;
      width: 2px;
      display: block;
      margin-left: 50px;
      margin-top: -5px;
    }
    .vLineGray {
      background-color: @color-gray;
    }
  }
}
.greenTitle {
  color: @color-primary;
  font-size: 18px;
}
.grayTitle {
  color: @color-gray;
  font-size: 18px;
  font-weight: 500;
}
.grayContent {
  color: @color-gray;
  font-size: 14px;
  font-weight: 500;
}
.stepText {
  li {
    height: 123px;
  }
}
</style>
